import { getCSSColorV2 } from '@/utils/color-helper';
// import { toNumLocaleString } from '@numa/common/utils/math';
import { TTooltipHide } from '../types';

const labelColor = getCSSColorV2('text-4');

export const seriesLabel: echarts.EChartOption.SeriesBar = {
  label: {
    show: true,
    position: 'top',
    textStyle: {
      fontSize: 12,
      color: labelColor
    }
    // formatter: ({ data }: any) => {
    //   return toNumLocaleString(data);
    // }
  }
};

export const seriesBar: echarts.EChartOption.SeriesBar = {
  type: 'bar',
  barGap: '0%',
  barWidth: 12,
  data: [],
  itemStyle: {
    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: '#45BFB0' // 100% 处的颜色
        },
        {
          offset: 1,
          color: 'rgba(69,191,176,0.01)' // 0% 处的颜色
        }
      ],
      global: false // 缺省为 false
    }
  }
};

export const seriesLabelBar: echarts.EChartOption.SeriesBar = {
  ...seriesLabel,
  ...seriesBar
};

// !(Deprecated) 请使用 createSeriesBarTopRectRenderItem
export const seriesBarTopRect: echarts.EChartOption.SeriesCustom & TTooltipHide = {
  type: 'custom',
  tooltip: {
    show: false
  },
  renderItem(params, api: any) {
    const xValue = api.value(0);
    const highPoint = api.coord([xValue, api.value(1)]);
    const halfWidth = 6;

    return {
      type: 'line',
      transition: ['shape'],
      style: {
        lineWidth: 2,
        stroke: getCSSColorV2('brand-4')
      },
      shape: {
        x1: highPoint[0] - halfWidth,
        y1: highPoint[1],
        x2: highPoint[0] + halfWidth,
        y2: highPoint[1]
      }
    };
  }
};

interface ICreateSeriesBarTopRectRenderItemProps {
  name?: string;
  stroke?: string;
  width?: number;
  data?: number[];
}

export const createSeriesBarTopRectRenderItem = (props?: ICreateSeriesBarTopRectRenderItemProps) => {
  const { name, stroke = getCSSColorV2('brand-4'), width = 6, data } = props || {};
  return {
    type: 'custom',
    name,
    data,
    tooltip: {
      show: false
    },
    renderItem(params, api: any) {
      console.log();
      const xValue = api.value(0);
      const highPoint = api.coord([xValue, api.value(1)]);
      const halfWidth = width;

      return {
        type: 'line',
        transition: ['shape'],
        style: {
          lineWidth: 2,
          stroke
        },
        shape: {
          x1: highPoint[0] - halfWidth,
          y1: highPoint[1],
          x2: highPoint[0] + halfWidth,
          y2: highPoint[1]
        }
      };
    }
  };
};
